<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>库存预警提醒</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        #my-header{
            border-bottom: 1px solid;
            margin-bottom: 25px;
        }
        #my-aside{
            border-right: 1px solid #3a8ee6;
        }
        .el-pagination {
            text-align: center;
        }
        #warningLi li{
            margin-bottom: 33px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>

        <el-header id="my-header">
            <el-form label-width="80px" :inline="true" >
                <template>
                    <span>仓库名称:</span>
                    <el-select v-model="ware" placeholder="请选择" @change="selectWare(ware)">
                        <el-option
                                v-for="item in selectWares"
                                :key="item.id"
                                :label="item.wareName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </template>
                <span>产品名称:</span>
                <el-form-item label="">
                    <el-input placeholder="请输入产品名称" v-model="findProduct"></el-input>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="searchProduct">搜索</el-button>
                <span style="color: red">当前仓库预警信息有{{warningNum}}条</span>
            </el-form>
        </el-header>
        <el-container>
            <el-aside width="200px" id="my-aside">
                <span style="color: #3a8ee6;font-weight: bolder;">现有仓库列表</span>
                <el-tree :data="selectWares"
                         ref="tree"
                         highlight-current
                         show-checkbox
                         node-key="id"
                         :props="defaultProps"
                         :default-expand-all=true
                         @check="handleNodeClick"
                >

                </el-tree>
            </el-aside>
            <el-main>
                <el-table
                        ref="wareTable"
                        :data="wareTable"
                        border
                        style="width: 100%">
                    <el-table-column label="序号" type="index">
                    </el-table-column>
                    <el-table-column label="仓库名称">
                        <template slot-scope="scope">
                            <span >{{scope.row.wareName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="产品编号">
                        <template slot-scope="scope">
                            <span >{{scope.row.productNumber}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="产品名称">
                        <template slot-scope="scope">
                            <span >{{scope.row.productName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="库存量">
                        <template slot-scope="scope">
                            <span >{{scope.row.inventory}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <span style="color: red">库存不足</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注">
                        <template slot-scope="scope">
                            <span >{{scope.row.remark}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="当前产品预警值">
                        <template slot-scope="scope">
                            <span >{{scope.row.warningNum}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="设置预警值">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" @click="setWarningValue(scope.$index,scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>

    <!--分页-->
    <el-pagination
        small
        layout="prev, pager, next"
        @current-change="loadPage"
        :total="total"
        :current-page="current"
        :page-size="pageSize">
    </el-pagination>
    <!--设置预警值-->
    <el-dialog title="设置预警值" :visible.sync="showWarningValueVisible" >
        <el-form :model="warningValueForm" ref="warningValueForm" :inline="true">
            <ul style="list-style: none" id="warningLi" v-if="warningValueForm">
                <li>仓库名称：{{warningValueForm.wareName}}</li>
                <li>产品名称：{{warningValueForm.productName}}</li>
                <li>当前产品预警值：{{warningValueForm.warningNum}}</li>
            </ul>
            <el-form-item label="设置预警值：" prop="warningValue" >
                <el-input v-model="warningValueForm.warningNum" placeholder="请输入预警值"    ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelSetWarningValue('warningValueForm')">取 消</el-button>
            <el-button type="primary" @click="sureSetWarningValue('warningValueForm')" >确 定</el-button>
        </div>
    </el-dialog>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                //下拉框里仓库数据
                selectWares: null,
                ware: '',
                defaultProps: {
                    children: 'cargoAreaList',
                    label:'wareName'
                },

                total:0,
                current:1,
                pageSize:10,
                wareTable:null,
                //预警信息条数
                warningNum:'',
                showWarningValueVisible:false,
                warningValueForm:'',
                //查找产品关键字
                findProduct:null
            };
        },
        methods: {
            loadPage(current){
                this.current = current;
                axios.get("/stockEarlyWarning/" + current).then(value => {
                    if (value.data.code == 1) {
                        this.wareTable = value.data.data.records;
                        this.warningNum = this.wareTable.length
                        this.total = value.data.data.total;
                        this.current = value.data.data.current;
                        this.pageSize = value.data.data.pageSize;
                    }
                });
            },
            //节点被选中时
            handleNodeClick(data) {
                console.log(data.id);
                if (this.$refs.tree.getCheckedKeys().length!=0){
                    if (data.id!=null){
                        axios.get("/stockEarlyWarning-ware-product/"+data.id).then(value => {
                            if (value.data.code == 1) {
                                this.$nextTick(()=>{
                                    //赋值
                                    this.wareTable=value.data.data
                                    this.warningNum = this.wareTable.length
                                })
                            }
                        });
                    }else {
                        axios.get("/stockEarlyWarning-ware-product/"+data.wareId).then(value => {
                            if (value.data.code == 1) {
                                this.$nextTick(()=>{
                                    //赋值
                                    this.wareTable=value.data.data
                                    this.warningNum = this.wareTable.length
                                })
                            }
                        });
                    }
                }

            },
            //设置预警值
            setWarningValue(index,row){
                this.$nextTick(()=>{
                    //赋值
                    this.warningValueForm=row
                })
                this.showWarningValueVisible=true
            },
            //取消
            cancelSetWarningValue(value){
                this.showWarningValueVisible=false;
                this.$message("已取消修改！");
                this.$refs[value].resetFields();
            },
            //确定修改预警值
            sureSetWarningValue(value1){
                this.showWarningValueVisible=false;
                axios.put("/stockEarlyWarning/",this.warningValueForm).then(value => {
                    if (value.data.code == 1) {
                        this.$message("已修改成功！");
                        this.$refs[value1].resetFields();
                    }
                });

            },
            //查找关键字
            searchProduct(){
                axios.get("/stockEarlyWarning-product/"+this.findProduct).then(value => {
                    if (value.data.code == 1) {
                        this.wareTable=value.data.data
                        this.warningNum = this.wareTable.length
                    }
                });
            },
            //点击下拉框时获得对应的仓库
            selectWare(value1){
                //指定选中的节点
                this.$refs.tree.setChecked(value1,true,true);
                axios.get("/stockEarlyWarning-ware-product/"+value1).then(value => {
                    if (value.data.code == 1) {
                        this.wareTable=value.data.data
                        this.warningNum = this.wareTable.length
                        this.loadPage(this.current);
                    }
                });

            }
        },

        mounted(){
            this.loadPage(1);
            // 发送 get 请求
            axios.get("/stockEarlyWarning-ware/").then(value => {
                if (value.data.code == 1) {
                    this.selectWares=value.data.data
                }
            });
        }
    });
</script>
</body>
</html>